<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>鼠标拖动</title>
    <style>
      body
      {
        background-color: #F3EFE0;
      }
      .bot
      {
        color: #918E84;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 24px;
        position: relative;
        top: 300px;
        right: 250px;
        float: right;
      }
      body{margin:0}
      .box{width:400px;height:300px;border:5px solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
      .hd{width:100%;height:25px;background-color:#7c9299;border-bottom:1px solid #369;line-height:25px;color:#fff;cursor:move}
      #box_close{float:right;cursor:pointer}
    </style>
  </head>
  <body>
    <div id="box" class="box">
      <div id="drop" class="hd">
        注册信息 (可以拖拽)
        <span id="box_close">【关闭】</span>
      </div>
      <div class="bd"></div>
    </div>
    <script>
      var box = document.getElementById('box');
      var drop = document.getElementById('drop');
      //onmousedown 事件会在鼠标按键被按下时发生
      drop.onmousedown = function(event) {         
        var event = event || window.event;
//pageX返回鼠标指针相对于当前文档左边缘的位置   clientX返回鼠标指针的坐标
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        var spaceX = pageX - box.offsetLeft;
        var spaceY = pageY - box.offsetTop;
        document.onmousemove = function(event) {   
          var event = event || window.event;
          var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
          var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
          box.style.left = pageX - spaceX + 'px';
          box.style.top = pageY - spaceY + 'px';
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
      };
      document.onmouseup = function() {
        document.onmousemove = null;
      };
    </script>
    <div class="bot">
      <input type="button" value="返回" onclick="location.href = '../章节目录/第八章.html'">
      <br><br><br><br><br><br><br><br>
      <h3>Please appreciate((●'◡'●))......</h3>
    </div>
  </body>
</html>